<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>资源管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
    <style>
        .project-list-item-body {
            border: 0;
        }
        .project-list-item {
             border: 1px solid #e8e8e8;
         }
        .layui-table-click{
            background-color: #ccd9ff;
        }
    </style>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">

                <div class="layui-bg-gray" style="padding: 30px;">
                    <div class="layui-row layui-col-space15">
                        <!--检索框-->
                        <div class="layui-col-md12">
                            <div class="layui-panel">
                                <form class="layui-form layui-form-pane">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">资源标题</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="title" id="realName" placeholder="" class="layui-input">
                                        </div>
                                        <label class="layui-form-label">资源详情</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="remark" id="username" placeholder="" class="layui-input">
                                        </div>
                                        <div class="layui-inline">
                                            <button type="submit" id="data-search-btn" class="layui-btn layui-btn-primary permission" permission = 'blogFile:query' lay-submit lay-filter="data-search-btn"><i class="layui-icon">&#xe615;</i>
                                                搜 索</button>
                                            <!--<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon">&#xe615;</i>
                                                获取数据</button>-->
                                            <button type="submit" class="layui-btn pear-btn-danger layui-btn-primary permission" permission = "blogFile:del" lay-submit lay-filter="data-checked-btn">
                                                <i class="layui-icon layui-icon-delete"></i>
                                                删除选中数据</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--上传文件-->
                        <div class="layui-col-md12 permission" permission = "blogFile:add">
                            <div class="layui-panel">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                                    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                                    <div class="layui-upload-list" style="max-width: 1000px;">
                                        <table class="layui-table">
                                            <colgroup>
                                                <col>
                                                <col width="150">
                                                <col width="200">
                                                <col width="150">
                                                <col width="150">
                                                <col width="150">
                                            </colgroup>
                                            <thead>
                                            <tr><th>文件名</th>
                                                <th>标题</th>
                                                <th>描述</th>
                                                <th>大小</th>
                                                <th>上传进度</th>
                                                <th>操作</th>
                                            </tr></thead>
                                            <tbody id="demoList"></tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!--文件列表-->
                        <div class="layui-col-md12">
                            <div class="layui-panel">
                                <div id="currentTableId"></div>
                            </div>
                        </div>
                    </div>
                </div>
			</div>
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
        <script src="../../js/baseUrl.js"></script>
        <script src="../../js/cookieUtils.js"></script>
        <script src="../../component/pear/module/ajaxRequest.js"></script>
        <script src="../../js/permission.js"></script>
        <script src="../../js/jquery-3.2.1.min.js"></script>
		<script>
			layui.use(['table', 'layer', 'form', 'jquery', 'card' ,'upload', 'ajaxRequest', 'element','toast'], function() {

				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let layer = layui.layer;
				let card = layui.card;
				let upload = layui.upload;
				let ajaxRequest = layui.ajaxRequest;
				let element = layui.element;
				let toast = layui.toast;

				$(function () {
                    // 添加权限验证
                    validaPermission();
                });

				card.render({
					elem: '#currentTableId',
					// url: '../../admin/data/card.json', // 接口数据
                    url: baseUrl+'/admin/file/getCategoryList', // 接口数据
					// data: [], // 静态数据
					page: true, // 是否分页
					limit: 8, // 每页数量
					linenum: 4, // 每行数量
					clickItem: function(data){ // 单击事件
						// console.log(data)
					}
				})
				
				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {
					queryJson = data.field;
					card.reload("currentTableId", {
						where: queryJson,
					});
					return false;
				});
				// 获取选择数据
				form.on('submit(data-checked-btn)', function() {
					var data = card.getChecked("currentTableId");
					// layer.msg(JSON.stringify(data));

                    if (!data){
                        layer.msg("未选择");
                        return false;
                    }
                    console.log(data.id);

                    layer.confirm('确定要删除该资源吗', {
                        icon: 3,
                        title: '提示'
                    }, function(index) {
                        layer.close(index);
                        let loading = layer.load();
                        var res = ajaxRequest.sendPost("/admin/file/delBlogFile",{'id':data.id},false,true);
                        if (res){
                            layer.close(loading);
                            toast.success({title: 'Success',message: res.msg,position: 'topRight'});
                            $("#data-search-btn").click();
                        }
                    });
					return false;
				});
				// 获取所有数据
				form.on('submit(data-btn)', function() {
					var data = card.getAllData("currentTableId");
					layer.msg(JSON.stringify(data));
					return false;
				});
                //多文件上传
                var uploadListIns = upload.render({
                    elem: '#testList'
                    ,elemList: $('#demoList') //列表元素对象
                    ,url: baseUrl+'/admin/file/addBlogFile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    ,headers: {'Authorization': tokenPrefix + token}
                    ,accept: 'file'             //指定上传文件是什么类型（file:全部，默认图片）
                    // ,acceptMime: 'image/*',   //文件格式筛选（图片）
                    ,multiple: true
                    ,number: 3                  //最大上传数量
                    ,auto: false                //不自动上传
                    ,field: 'mf'        //设置文件名。与后端代码出入的相对应
                    ,method: "post"  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
                    ,bindAction: '#testListAction'
                    ,choose: function(obj){
                        var that = this;
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function(index, file, result){

                            var tr = $(['<tr id="upload-'+ index +'">'
                                ,'<td>'+ file.name +'</td>'
                                ,'<td><input fileName = "'+ file.name +'" class="layui-input title" id="title" name="title" type="text" placeholder = "请输入标题" title="'+index+'" value="" ></td>'
                                ,'<td><input fileName = "'+ file.name +'" class="layui-input remark" id="remark" name="remark" type="text" placeholder = "请输入描述" title="'+index+'" value="" ></td>'
                                ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                                ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                                ,'<td>'
                                ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                ,'</td>'
                                ,'</tr>'].join(''));

                            //单个重传
                            tr.find('.demo-reload').on('click', function(){
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function(){
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            that.elemList.append(tr);
                            element.render('progress'); //渲染新加的进度条组件

                            // 输入标题的离焦事件
                            $(".title").mouseleave(function () {
                                var ti = $(this).attr("title");
                                var name = $(this).attr("fileName");
                                var title = $(this).val();
                                var remark = $(this.parentNode.nextElementSibling.firstChild).val();

                                if (!title){title = "无";}
                                if (!remark){remark = "无";}
                                //files[ti] 原文件； newFileName 新文件名
                                var renameReportFile =new File([files[ti]],title+"=="+remark+"=="+name,{type:files[ti].type});
                                files[ti] = renameReportFile;

                                // console.log(title+"=="+remark+"=="+name);
                            });

                            // 输入描述后的离焦事件
                            $(".remark").mouseleave(function () {
                                var ti = $(this).attr("title");
                                var name = $(this).attr("fileName");
                                var remark = $(this).val();
                                var title = $(this.parentNode.previousElementSibling.firstChild).val();

                                if (!title){title = "无";}
                                if (!remark){remark = "无";}
                                //files[ti] 原文件； newFileName 新文件名
                                var renameReportFile =new File([files[ti]],title+"=="+remark+"=="+name,{type:files[ti].type});
                                files[ti] = renameReportFile;

                                // console.log(title+"=="+remark+"=="+name);
                            });
                        });
                    }
                    ,done: function(res, index, upload){ //成功的回调
                        var that = this;
                        if(res.status == 200){
                            //上传成功
                            var tr = that.elemList.find('tr#upload-'+ index)
                                ,tds = tr.children();
                            tds.eq(3).html(''); //清空操作
                            delete this.files[index]; //删除文件队列已经上传成功的文件
                            setTimeout(() => {
                                tr.remove();    //直接清空这行
                            },800);
                            $("#data-search-btn").click();
                            return;
                        }
                        this.error(index, upload);
                    }
                    ,allDone: function(obj){ //多文件上传完毕后的状态回调
                        // toast.success({title: 'Success',message: '上传成功'+obj.successful+"个文件",position: 'topRight'});
                        toast.success({title: 'Success',message: '上传完毕，结果看列表',position: 'topRight'});
                        // console.log(obj)
                    }
                    ,error: function(index, upload){ //错误回调
                        var that = this;
                        var tr = that.elemList.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(5).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                    ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
                        element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
                    }
                });

			})
		</script>
	</body>
</html>
